<template>
	<div class="register">
		<div class="register-head">
			<van-nav-bar
					title="注册"
					left-text="返回"
					left-arrow
					@click-left="onClickLeft"
			/>
		</div>
		<div class="register-content">
			<van-form @submit="onSubmit" :show-error=false>
				<van-field
						v-model="value"
						placeholder="用户名"
						:rules="[{ required: true, message: '请填写用户名' ,}]"
				/>
<!--				pattern: /^[a-zA-Z]\w{4,15}$/-->
				<van-field
						v-model="telephone"
						type="tel"
						name="telephone"
						placeholder="手机号码"
						:rules="[{ required: true, message: '请输入正确手机号',pattern:/^1[3456789]\d{9}$/ }]"
				/>
				<van-field
						v-model="password"
						:type="passwordType"
						placeholder="密码"
						@click-right-icon="eyeChange"
						:rules="[{ required: true, message: '请填写密码' }]"

				>
					<template #right-icon><van-icon :name="passwordicon"/></template>
				</van-field>
				<van-field
						type="password"
						v-model="confirmPassword"
						placeholder="确认密码"
						:rules="[{ required: true, message: '两次密码不匹配' ,validator:check }]"
				/>


				<van-field
						type="tel"
						v-model="reply"
						placeholder="请输入表达式结果,点击刷新"
						:rules="[{ required: true, message: '请输入正确表达式结果',validator: judge }]"
				>
					<template #extra>
						<canvas @click="draw" ref="canvas" width="100px" height="50px"></canvas>
					</template>
				</van-field>
				<div style="margin: 16px;">
					<van-button type="warning" block native-type="submit">立即注册</van-button>
				</div>
			</van-form>
			<div>
				<van-checkbox v-model="checked" checked-color="skyblue">
					我已阅读并同意<a href="#">&lt;&lt;用户注册协议&gt;&gt;</a></van-checkbox>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:"Register",
		data(){
			return {
				reply:'',
				test1:'',
				answer:'',
				passwordicon:'closed-eye',
				passwordType:'password',
				value:'',
				telephone:'',
				password:'',
				confirmPassword:'',
				checked:true,
			}
		},
		mounted(){
			this.draw();
		},
		methods:{
			onSubmit(){
				if(this.checked){
					this.axios.post(this.GLOBAL.registerUser,{
						user_password:this.password,
						user_name:this.value,
						telephone:this.telephone,
					}).then(res=>{
						if(res.data.Insert){
							this.$router.push({
								name:'Login'
							});
						}else{
							this.$toast.fail('服务出了点问题，请重新注册');
						}
					});
				}else{
					this.$toast.fail('请勾选注册协议');
				}
			},
			onClickLeft(){
				this.$router.go(-1);
			},
			check(value){
				return value==this.password;
			},
			eyeChange(){
				if(this.passwordicon=='closed-eye'){
					this.passwordicon='eye-o';
					this.passwordType='text';
				}else {
					this.passwordicon='closed-eye';
					this.passwordType='password';
				}
			},
			draw(){
				let i=Math.round(Math.random()*100);
				let j=Math.round(Math.random()*10);
				this.answer=i+j;
				let ctx=this.$refs.canvas.getContext('2d');
				ctx.clearRect(0,0,this.$refs.canvas.width,this.$refs.canvas.height);
				ctx.font = "20px serif";
				ctx.textAlign="center";
				ctx.textBaseline="hanging"
				ctx.fillStyle = "orange";
				ctx.fillText(`${i} + ${j}`,50,20);
			},
			judge(value){
				console.log(value);
				return value==this.answer;
			}
		}
	}
</script>

<style lang="less">
	.register{
		overflow: hidden;
		.register-head{
			margin-bottom: 10px;
		}
		.register-content{
			width: 90%;
			margin: 0 auto;
			.van-button{
				border-radius: 12px;
			}
			a{
				color: lightsalmon;
			}
			a:hover{
				color: skyblue;
			}
			canvas{
				background-color: #F7F7F7;
			}
		}

	}
</style>

